<template>
  <div>
    <div class="container">
      <div class="stat-box">
        <div class="stat">
          <div class="stat-left">
            <div class="stat-left-box">
              <div class="stat-left-number">{{ lookInfo.orderTotal }}</div>
              <div class="stat-left-label">订单总数（条）</div>
              <div class="stat-left-pic"></div>
            </div>
          </div>
          <div class="stat-right">
            <div class="stat-right-box">
              <div class="stat-right-pic"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">{{ lookInfo.inStrikeNum }}</div>
                <div class="stat-right-label">待核查（条）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic2"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">{{ lookInfo.validNum }}</div>
                <div class="stat-right-label">有效数据（条）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic3"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">
                  {{ lookInfo.strikeNum }}
                </div>
                <div class="stat-right-label">已核查（条）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic4"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">
                  {{ lookInfo.inValidNum }}
                </div>
                <div class="stat-right-label">无效数据（条）</div>
              </div>
            </div>
          </div>
        </div>
        <div class="stat">
          <div id="orderCheck" ref="chart"></div>
        </div>
      </div>
      <div class="container-table">
        <div class="card-title">
          <img src="@/assets/images/title-card.png" alt=""/>
          <div class="text">订单明细</div>
        </div>
        <div class="container-search">
          <div class="container-search-bottom">
            <!-- 筛选条件 -->
            <div class="search">
              <div class="search-item">
                <el-date-picker
                    v-model="params.dateRange"
                    type="daterange"
                    align="right"
                    range-separator="至"
                    start-placeholder="订单开始日期"
                    end-placeholder="订单结束日期"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                />
              </div>
              <div class="search-item">
                <el-input
                    style="width: 300px"
                    v-model="params.orderKeyword"
                    placeholder="请输入关键词检索"
                    clearable
                    maxlength="25"
                    class="search-input"
                />
              </div>
              <div class="search-item">
                <el-button type="primary" @click="getOrderList('SS')"
                ><img src="@/assets/images/search.png" alt=""/>
                  搜索
                </el-button
                >
                <el-button color="#eff3ff" :dark="true" @click="reset"
                ><img src="@/assets/images/reset.png" alt=""/>
                  <span style="color: #6d98fd">重置</span>
                </el-button>
                <el-button v-if="deptLevel !== 3" color="#24c13c" :dark="true" @click="distribute"
                >
                  <el-icon :size="20" color="#ffffff">
                    <Paperclip/>
                  </el-icon>
                  <span style="color: #ffffff">分发</span>
                </el-button>
                <el-button v-if="deptLevel === 1" color="#f47e01" :dark="true" @click="importHandle"
                >
                  <el-icon :size="20" color="#ffffff">
                    <Upload/>
                  </el-icon>
                  <span style="color: #ffffff">导入</span>
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="status-container">
          <el-tabs
              v-model="activeName"
              class="demo-tabs"
              @tab-change="handleClick"
          >
            <el-tab-pane
                :label="item.dictLabel"
                :name="item.dictValue"
                v-for="(item, index) in orderTypeLst"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 表格数据 -->
        <el-table
            v-loading="loading"
            :data="orderList"
            border
            height="29vh"
            ref="listTableRef"
            :header-cell-style="{ 'text-align': 'center' }"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" width="55" :selectable='checkboxInit'/>
          <el-table-column
              label="订单编号"
              prop="orderCode"
              :show-overflow-tooltip="true"
              width="170"
              align="center"
          >
          </el-table-column>
          <el-table-column
              label="订单时间"
              prop="orderTime"
              :show-overflow-tooltip="true"
              width="170"
              align="center"
          >
          </el-table-column>
          <el-table-column
              label="买家姓名"
              prop="orderBuyerName"
              width="130"
              :show-overflow-tooltip="true"
              align="center"
          >
          </el-table-column>
          <el-table-column
              label="联系电话"
              prop="orderBuyerTel"
              :show-overflow-tooltip="true"
              width="140"
              align="center"
          >
          </el-table-column>
          <el-table-column
              label="收货人姓名"
              prop="orderHarverName"
              :show-overflow-tooltip="true"
              width="130"
              align="center"
          >
          </el-table-column>
          <el-table-column
              label="收货人手机号"
              prop="orderHarverTel"
              :show-overflow-tooltip="true"
              width="140"
              align="center"
          >
          </el-table-column>
          <el-table-column
              label="购买物品"
              prop="orderGoods"
              :show-overflow-tooltip="true"
              width="140"
              align="center"
          >
          </el-table-column>
          <el-table-column
              label="收货地址"
              prop="orderHarverAddress"
              :show-overflow-tooltip="true"
              width="230"
              align="center"
          >
          </el-table-column>
          <el-table-column
              label="状态"
              prop="orderStatus"
              :show-overflow-tooltip="true"
              width="150"
              align="center"
          >
            <template #default="{ row }">
              {{ getOrderStatusName(row.orderStatus) }}
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              :show-overflow-tooltip="true"
              :resizable="false"
              fixed="right"
              align="center"
          >
            <template #default="{ row }">
              <div class="table-operate">
                <span class="detail" @click="handleOperate('detail', row)"
                >查看</span
                >
                <span v-if="deptLevel === 3 && row.orderStatus === 2" class="check" @click="handleOperate('check', row)"
                >核查</span
                >
                <span v-if="(deptLevel === 1 && row.orderStatus === 1) || (deptLevel === 2 && row.orderStatus === 1)"
                      class="edit" @click="handleOperate('distribute', row)"
                >分发</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination
            class="pagination"
            :total="total"
            v-model:page="params.pageNum"
            v-model:limit="params.pageSize"
            @pagination="getOrderList('FY')"
        />
      </div>
      <!--   任务分发   -->
      <el-dialog
          v-model="taskDispense"
          :before-close="submitFormFFClose"
          width="460px"
          append-to-body
          class="dialogBox"
          align-center
          style="top: 10.3vh !important"
      >
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <img src="@/assets/images/title-card.png" alt=""/>
            <div class="header-title">任务分发</div>
          </div>
        </template>
        <div class="number-content">
          <span>已选择</span>
          <span style="color: #2c71fc;margin: 0 5px;">{{ taskNumber }}</span>
          <span>条订单数据</span>
        </div>
        <el-form
            :model="queryParams"
            ref="queryRef"
            :rules="companyRules"
            :inline="true"
            style="width: 90%;margin: 3% auto 0;height: 170px"
        >
          <el-form-item label="派发单位" prop="deptId">
            <el-select
                v-model="queryParams.deptId"
                placeholder="请选择"
                clearable
                style="width: 240px"
                popper-class="ImportdialogBoxWork"
            >
              <el-option
                  v-for="dict in companyList"
                  :key="dict.deptId"
                  :label="dict.deptName"
                  :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitFormFF">确 认</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 导入弹窗 -->
      <el-dialog
          v-model="showImport"
          :width="showuploadtable ? '860px' : '460px'"
          height="400px"
          append-to-body
          class="dialogBox ImportdialogBox"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :show-close="!showuploadtable"
          align-center
          style="top: 10.3vh !important"
      >
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <img src="@/assets/images/title-card.png" alt=""/>
            <div class="header-title">导入</div>
          </div>
        </template>
        <div class="Import" v-if="!showuploadtable">
          <div class="Import-title">
            <div class="item">
              <div class="title">导入模板</div>
              <a :href="'http://101.71.158.60:50072/data-api/file/public/file/订单导入模板.xls'" class="text">
                <!--              <a :href="fileUrl + '/file/public/file/%E8%AE%A2%E5%8D%95%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls'" class="text">-->
                <!--              <a src="http://101.71.158.60:50072/data-api/file/public/file/%E8%AE%A2%E5%8D%95%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls" class="text" style="cursor: pointer" @click="download">-->
                订单数据导入模板.xls
              </a>
            </div>
            <div class="item">
              <div class="title">导入提示</div>
              <div class="text">
                请确保数据严格按照导入模板填报，否则将视为异常数据！
              </div>
            </div>
          </div>
          <div class="Import-upload">
            <el-upload
                class="upload-demo"
                drag
                :action="uploadUrl"
                multiple
                accept=".xls,.xlsx"
                :headers="myHeaders"
                :on-success="uploadSuccess"
                :before-upload="beforeUpload"
                :show-file-list="false"
            >
              <img src="@/assets/images/upload-icon.png" alt=""/>
              <div class="el-upload__text">点击或将文件拖拽到这里上传</div>
            </el-upload>
            <el-progress
                v-if="isUpload"
                status="success"
                :percentage="100"
                :format="format"
                :indeterminate="true"
                style="width: 80%"
            />
          </div>
        </div>
        <div class="Import-table" v-else>
          <div class="table-text">
            请核实以上数据的准确性，重复数据，异常数据无法导入！
          </div>
          <div class="table-text">
            正常数据 {{ normalData }} 条，重复数据
            {{ repeatData }} 条，异常数据 {{ abnormalData }} 条，
          </div>
          <el-table
              :data="ImporttableList"
              border
              height="40vh"
              :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
                label="操作"
                width="150"
                :show-overflow-tooltip="true"
                fixed="right"
                :resizable="false"
            >
              <template #default="{ row }">
                <div class="table-operate">
                  <span class="delete" @click="importdelete(row)">删除</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                label="订单编号"
                prop="orderCode"
                width="150"
                :show-overflow-tooltip="true"
                align="center"
            >
            </el-table-column>
            <el-table-column
                label="收货地址"
                width="150"
                prop="orderHarverAddress"
                :show-overflow-tooltip="true"
                align="center"
            >
            </el-table-column>
            <el-table-column
                label="购买物品"
                width="150"
                prop="orderGoods"
                :show-overflow-tooltip="true"
                align="center"
            >
            </el-table-column>
            <el-table-column
                label="买家信息"
                width="150"
                prop="orderBuyerName"
                :show-overflow-tooltip="true"
                align="center"
            >
            </el-table-column>
            <el-table-column
                label="数据状态"
                width="150"
                prop="orderDataStatus"
                :show-overflow-tooltip="true"
                align="center"
            >
              <template #default="{ row }">
                <div v-if="row.orderDataStatus == 1">
                  <div v-if="row.isRepeat == 1">
                    <span>重复</span><img src="@/assets/images/Lament.png" alt=""/>
                  </div>
                  <div v-else>
                    <span>正常</span>
                  </div>
                </div>
                <div v-else>
                  <div v-if="row.isValididno == 1 || row.isValidtel == 1 || row.isValidtime == 1 ">
                    <span>异常</span><img src="@/assets/images/Lament.png" alt=""/>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
              v-model:current-page="importPage"
              :page-size="importSize"
              layout="total, prev, pager, next"
              :total="importtotal"
              :background="true"
              @current-change="handleimportPageChange"
          />
        </div>
        <template #footer v-if="showuploadtable">
          <div class="dialog-footer">
            <el-button type="primary" @click="importsubimt">确 定</el-button>
            <el-button @click="importcancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
      <!--  详情  -->
      <orderDetail
          v-if="showOrderVisible"
          ref="orderRef"
          v-model:showUnitdetail="showOrderVisible"
      />
      <!--  核查  -->
      <el-dialog
          v-model="checkVisible"
          width="1400px"
          append-to-body
          class="dialogBox"
      >
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <img src="@/assets/images/title-card.png" alt=""/>
            <div class="header-title">订单核查</div>
          </div>
        </template>
        <OrderCheck
            v-if="checkVisible"
            ref="orderCheckRef"
            v-model:checkVisible="checkVisible"
            @refreshList="reset"
            @keyPersonnelFun="keyPersonnelFun"
            @closeTwiceChange="closeTwiceChange"
        />
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitHandle">确 认</el-button>
            <el-button @click="peopleCancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
      <!--  核查的二次确认  -->
      <el-dialog
          v-model="checkTwiceVisible"
          width="550px"
          height="500px"
          append-to-body
          class="dialogBox secondCheck"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
      >
        <div style="padding: 3% 8%;font-size: 20px;">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div>
              <div style="color: #2c71fc;">重点人员提示</div>
              <div style="color: #6299fc;">Message prompt</div>
            </div>
            <div class="rightPicture"></div>
          </div>
          <div style="margin-top: 20px;">
            经公安数据比对，发现核查人员为重点人员，是否继续填写管控情况？
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="continueFillIn">继续填写</el-button>
            <el-button @click="nextFeedback">下次反馈</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
//看板信息
import {getToken} from "@/utils/auth";
import {nextTick, onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import * as echarts from "echarts";
import orderDetail from "./detail.vue";
import OrderCheck from "@/views/orderVerification/orderCheck.vue";
import {
  getinstitutionlist,
  delinstitution,
  getPoliceListApi,
} from "@/api/erp/unit";
import {
  getOrderPage,
  getPage,
  save,
  dispense,
  deptList,
  orderData,
  orderData12,
  downloadTemplate,
  excelDel
} from "@/api/orderVerification/order";
import {getDicts} from "@/api/system/dict/data";
import useUserStore from "@/store/modules/user";
import {useRouter} from "vue-router";
import clickThrottle from "@/utils/clickThrottle";
const fileUrl = ref(import.meta.env.VITE_APP_FILE_URL); // 导出文件服务器地址

const router = useRouter();
// 当前登录的用户等级
const deptLevel = useUserStore().deptLevel;

const {proxy} = getCurrentInstance();
const chart = ref();
const params = ref({
  startTime: "",
  endTime: "",
  dateRange: "",
  orderKeyword: "",
  orderStatus: 0,
  pageNum: 1,
  pageSize: 10
})
const activeName = ref("0")
// 表格加载效果
const loading = ref(false);
const orderList = ref([]);
// 总数
const total = ref(0);
const showImport = ref(false);
//上传成功展示预览
let showuploadtable = ref(false);
const uploadUrl =
    import.meta.env.VITE_APP_BASE_API + "/system/excel/analysis";
const myHeaders = ref({
  Authorization: "Bearer " + getToken(),
  ContentType: "multipart/form-data"
});
//正常的数据
let normalData = ref(0);
//重复的数据
let repeatData = ref(0);
//异常的数据
let abnormalData = ref(0);
//导入数据的分页数据
let importPage = ref(1);
let importSize = ref(10);
let importtotal = ref(1);
//导入分页数据
let ImporttableList = ref([]);

let taskDispense = ref(false);
let taskNumber = ref(0);

let queryRef = ref("");
let queryParams = ref({
  deptId: ""
})
let companyList = ref([]);
let companyRules = ref({
  deptId: [{required: true, trigger: "blur", message: "请选择派发单位"}]
})
let showOrderVisible = ref(false);
let orderRef = ref();
let orderCheckRef = ref();
//所有数据
let allData = ref([]);

let checkVisible = ref(false);
let orders = [];
// 重点人员提示
let checkTwiceVisible = ref(false);

// echarts
const initChart = () => {
  const myChart = echarts.init(chart.value);
  var option = {
    tooltip: {
      trigger: 'axis',
      showContent: true,
      // confine: true,
      appendToBody: true
    },
    dataset: {
      source: twelveData
    },
    xAxis: {type: 'category'},
    yAxis: {
      name: '单位：条',
      gridIndex: 0,
      type: 'value',
      // axisLabel: {
      //   formatter: '{value}条'
      // }
    },
    grid: {
      top: 55,
      x: 45,
      x2: 35,
      y2: 40
    },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: {focus: 'series'}
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: {focus: 'series'}
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: {focus: 'series'}
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: {focus: 'series'}
      }
    ]
  };
  myChart.setOption(option);
}

//看板信息
const lookInfo = ref({
  headcount: 0,
  resident: 0,
  censusRegisterPeo: 0,
  headHold: 0,
  headAverageHold: 0,
  keyPersonnel: 0,
  controlled: 0,
  goldieLock: 0,
  keyHold: 0,
  keyAverageHold: 0,
});

const checkboxInit = (row, index) => {
  if ((deptLevel === 1 && row.orderStatus === 1) || (deptLevel === 2 && row.orderStatus === 1)) {
    return 1; //可勾选
  } else {
    return 0;
  }
}

/*
* 获取列表数据
* */
const getOrderList = (type) => {
  loading.value = true;
  if (type === 'SS') {
    params.value.pageNum = 1;
  }
  let param = {
    ...params.value,
    sortOrder: 'desc',
    startTime: params.value.dateRange && params.value.dateRange.length > 0 ? params.value.dateRange[0] + ' 00:00:00' : '',
    endTime: params.value.dateRange && params.value.dateRange.length > 0 ? params.value.dateRange[1] + ' 23:59:59' : '',
  };
  getOrderPage(param).then((res) => {
    console.log("res", res)
    if (res.code === 200) {
      loading.value = false;
      orderList.value = res.data.records;
      total.value = res.data.total;
      params.pageNum = res.data.current;
    }
  })
}

/*
* 重置
* */
const reset = () => {
  params.value = {
    startTime: "",
    endTime: "",
    dateRange: "",
    orderKeyword: "",
    orderStatus: 0,
    pageNum: 1,
    pageSize: 10
  }
  activeName.value = "0";
  getOrderList('SS');
  getOrderData();
}

/*
* 查看/核查/分发
* */
let isDistributeVisible = false;
const dataInfo = ref({});
const handleOperate = (type, row) => {
  switch (type) {
    case "detail":
      showOrderVisible.value = true;
      nextTick(() => {
        orderRef.value.handleDetailInfo(row.id);
      });
      break;
    case "distribute":
      taskNumber.value = 1;
      orders = [];
      orders.push(row.id);
      isDistributeVisible = true;
      handleSelectionChange();
      taskDispense.value = true;
      break;
    case "check":
      checkVisible.value = true;
      console.log("DDDDDDD", row)
      nextTick(() => {
        orderCheckRef.value.getInfo(row);
      });
      let orderStatusName = getOrderStatusName(row.orderStatus)
      row.orderStatusName = orderStatusName;
      break;
    default:
      break;
  }
}

/*
* 分发
* */
const distribute = () => {
  taskDispense.value = true;
}

/*
* 导入
* */
const importHandle = () => {
  showImport.value = true;
}

/*
* 标签页选择
* */
const handleClick = () => {
  params.value.orderStatus = activeName.value;
  getOrderList('SS');
}

/**
 * @description: 下载模板
 */
const download = () => {
  downloadTemplate().then((row) => {
    if (row) {
      var elink = document.createElement("a");
      elink.download = "导入模板.xlsx";
      elink.style.display = "none";
      var blob = new Blob([row], {type: "application/octet-stream"});
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
    } else {
      this.$message.error("下载异常，请联系管理员！");
    }
  });
};

// 显示指定页的数据
const displayData = (val) => {
  let params = {
    pageNum: importPage.value,
    pageSize: importSize.value,
    unid: unid
  }
  getPage(params).then((res) => {
    if (res.code === 200) {
      ImporttableList.value = res.data.page.records;
      importSize.value = res.data.page.size;
      importPage.value = res.data.page.current;
      importtotal.value = res.data.page.total;
      normalData = res.data.normal_num;
      repeatData = res.data.repeat_num;
      abnormalData = res.data.abnormal_num;
    }
  })
};

let unid = "";
let isUpload = ref(false);
const format = (percentage) =>
    percentage === 100 ? "上传中……" : `${percentage}%`;
const uploadSuccess = (res) => {
  const {data, total} = res;
  if (res.code === 200) {
    ElMessage.success("文件上传成功！");
    isUpload.value = false;
    unid = data;
    // allData.value = rows;
    // importtotal.value = total;
    displayData(unid);
    showuploadtable.value = true;
  } else {
    isUpload.value = false;
    ElMessage.error(res.msg);
  }
};

function beforeUpload(file) {
  if (file.name.length > 50) {
    ElMessage.error(`文件名过长！最多只能上传50个文字的文件名文件！`);
    return false;
  }
  isUpload.value = true;
}

//导入数据的删除
const importdelete = async (row) => {
  ElMessageBox.confirm("此操作将删除这条数据，是否继续？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    confirmButtonClass: "confirmBtnClass",
    cancelButtonClass: "cancelBtnClass",
    type: "warning",
  })
      .then(async () => {
        const index = ImporttableList.value.indexOf(row);
        ImporttableList.value.splice(index, 1);
        await excelDel({orderId: row.orderId}).then((res) => {
          console.log(res)
        })
        await displayData(unid);
      })
      .catch(() => {
      });
};

//导入数据确认
const importsubimt = () => {
  if (repeatData.value > 0 || abnormalData.value > 0) {
    ElMessage.error(`请先处理重复和异常的数据!`);
    return;
  } else {
    save(unid).then((res) => {
      if (res.code === 200) {
        showuploadtable.value = false;
        showImport.value = false;
        getOrderList('SS');
        getOrderData();
        ElMessage.success(`新增成功!`);
      }
    })
  }
};

//导入数据取消
const importcancel = () => {
  showuploadtable.value = false;
  showImport.value = false;
  //导入分页数据
  ImporttableList.value = [];
  //正常的数据
  normalData.value = 0;
  //重复的数据
  repeatData.value = 0;
  //异常的数据
  abnormalData.value = 0;
};

/**
 * @description: 处理分页
 */
const handleimportPageChange = (value) => {
  displayData(unid);
};

/*
* 表格多选
* */
const listTableRef = ref();
const handleSelectionChange = (selection) => {
  if (isDistributeVisible) {
    listTableRef.value.clearSelection();
  }else {
    orders = selection.map(item => item.id);
    taskNumber.value = selection.length;
  }
}

const submitFormFFClose = () => {
  isDistributeVisible = false;
  taskDispense.value = false;
  queryParams.value.deptId = "";
  orders = [];
}

/*
* 分发确认
* */
const submitFormFF = () => {
  if (orders.length > 0) {
    proxy.$refs["queryRef"].validate(valid => {
      if (valid) {
        if (clickThrottle()) {
          let params = {
            orders: orders,
            dept_id: queryParams.value.deptId
          }
          dispense(params).then((res) => {
            if (res.code === 200) {
              taskDispense.value = false;
              isDistributeVisible = false;
              queryParams.value.deptId = "";
              orders = [];
              getOrderList('SS');
              getOrderData();
              proxy.$modal.msgSuccess("任务分发成功");
            }
          })
        }
      }
    });
  } else {
    proxy.$modal.msgError("请选择要分发的任务");
    return;
  }

}

/*
* 核查提交
* */
const submitHandle = () => {
  nextTick(() => {
    orderCheckRef.value.submitForm();
  });
}

const keyPersonnel = ref(false);
const keyPersonnelFun = (val) => {
  keyPersonnel.value = val;
  checkTwiceVisible.value = val;
}

/*
* 继续填写后关闭弹窗  跳转到人员管控页面
* */
window.keyPersonal = {};
const closeTwiceChange = (val) => {
  checkTwiceVisible.value = false;
  getOrderData();
  let obj = {
    screeningPersonnelId: val,
    controlType: 2
  }
  if (keyPersonnel.value) {
    window.keyPersonal = obj;
    router.push({
      path: "/personnelControl"
    });
  }else {
    router.push({path: "/personnelControl"});
  }
}

/*
* 取消
* */
const peopleCancel = () => {
  nextTick(() => {
    orderCheckRef.value.cancel();
  })
  checkVisible.value = false;
}

/*
* 继续填写
* */
const continueFillIn = () => {
  nextTick(() => {
    orderCheckRef.value.submitFormSure();
  });
}

/*
* 下次反馈
* */
const nextFeedback = () => {
  checkTwiceVisible.value = false;
  // peopleCancel();
  orderCheckRef.value.submitFormSure('next');
}


/*
* 取消
* */
const cancel = () => {
  taskDispense.value = false;
  isDistributeVisible = false;
  queryParams.value.deptId = "";
}

let orderTypeLst = ref([
  {
    dictLabel: "全部",
    dictValue: "0"
  },
  {
    dictLabel: "待分发",
    dictValue: "1"
  },
  {
    dictLabel: "待核查",
    dictValue: "2"
  },
  {
    dictLabel: "已核查",
    dictValue: "3"
  },
]);

/*
* 显示状态名
* */
const getOrderStatusName = (val) => {
  let obj = orderTypeLst.value.find((item) => item.dictValue === val.toString())
  return obj.dictLabel;
}

/*
* 获取任务分发的下拉数据
* */
const getCompanyList = () => {
  deptList().then((res) => {
    if (res.code === 200) companyList.value = res.data;
  })
}

/*
* 获取任务分发的下拉数据以及订单最近12个月数据
* */
let twelveData = [];
const getOrderData = async () => {
  await orderData().then((res) => {
    if (res.code === 200) lookInfo.value = res.data;
  })
  await orderData12().then((res) => {
    let year = res.data.map(item => item.key)
    year.unshift('')
    let orderTotal = res.data.map(item => item.value.orderTotal)
    orderTotal.unshift('订单总数')
    let orderNumByMonth = res.data.map(item => item.value.orderNumByMonth)
    orderNumByMonth.unshift('本月订单')
    let strikeNumByMonth = res.data.map(item => item.value.strikeNumByMonth)
    strikeNumByMonth.unshift('本月核查')
    let strikeTotal = res.data.map(item => item.value.strikeTotal)
    strikeTotal.unshift('核查总数')
    twelveData.push(year);
    twelveData.push(orderTotal);
    twelveData.push(orderNumByMonth);
    twelveData.push(strikeNumByMonth);
    twelveData.push(strikeTotal);
    initChart();
  })
}

onMounted(() => {
  getOrderList('SS');
  getCompanyList();
  getOrderData();
  if (deptLevel === 3) {
    orderTypeLst.value.splice(1, 1);
  }
});

</script>
<style scoped lang="scss">
.container {
  width: 100%;
  position: relative;

  .card-title {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #f6f6f6;

    .text {
      margin-left: 10px;
      font-size: 16px;
      color: #000000;
    }
  }

  .stat-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .stat {
    display: flex;
    align-items: center;
    // width: 794px;
    width: 49.5%;
    height: 220px;
    background: url("@/assets/images/stat-bgc.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;
    color: #ffffff;

    .stat-left {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1px dashed #6cabed;
      height: 80%;

      .stat-left-box {
      }

      .stat-left-number {
        text-align: center;
        font-family: DigifaceWide;
        font-size: 36px;
      }

      .stat-left-label {
        text-align: center;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24px;
        margin: 10px 0 20px 0;
      }

      .stat-left-pic {
        margin-top: 20px;
        margin: 0 auto;
        width: 80px;
        height: 80px;
        background: url("@/assets/images/stat-icon1.png") no-repeat;
      }

      .pic1 {
        background: url("@/assets/images/stat-icon8.png") no-repeat;
      }
    }

    .stat-right {
      width: 70%;
      display: flex;
      flex-wrap: wrap;
      height: 80%;
      padding-left: 60px;
      padding-top: 10px;


      .stat-right-box {
        display: flex;
        margin-right: 50px;
        margin-bottom: 38px;
      }

      .stat-right-pic {
        width: 60px;
        height: 60px;
        background: url("@/assets/images/stat-icon2.png") no-repeat;
        margin-right: 20px;
      }

      .pic2 {
        background: url("@/assets/images/stat-icon3.png") no-repeat;
      }

      .pic3 {
        background: url("@/assets/images/stat-icon4.png") no-repeat;
      }

      .pic4 {
        background: url("@/assets/images/stat-icon5.png") no-repeat;
      }

      .pic5 {
        background: url("@/assets/images/stat-icon6.png") no-repeat;
      }

      .pic6 {
        background: url("@/assets/images/stat-icon7.png") no-repeat;
      }

      .stat-right-number {
        font-family: DigifaceWide;
        font-size: 24px;
        margin-bottom: 8px;
      }

      .stat-right-label {
        font-family: PingFang SC;
        font-size: 16px;
      }
    }
  }

  #orderCheck {
    width: 100%;
    height: 250px;
  }

  .container-search {
    margin-bottom: 0px;

    .container-search-bottom {
      background-color: #ffffff;
      border-radius: 10px;
      padding: 15px 15px 15px 15px;
    }
  }

  .container-table {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px 15px 15px 15px;

    .sort {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 15px;

      .sort-title {
        font-size: 14px;
      }
    }

    .el-tabs {
      --el-tabs-header-height: 50px;
      margin-top: -15px;
    }
  }

  .pagination {
    margin-top: 0;
  }
}

.Import {
  padding: 0 30px 30px 30px;

  .item {
    display: flex;
    font-size: 12px;
    margin-bottom: 20px;

    .text {
      margin-left: 10px;
      color: #797979;
    }
  }

  .item:nth-child(1) {
    .text {
      color: #58e0ad;
    }
  }

  :deep(.el-upload-dragger) {
    padding: 0;
    width: 300px;
    height: 186px;
    margin: 0 auto;
    background-color: #f7fdff;
    border-radius: 10px;
  }
}

.Import-table {
  padding: 0 30px 20px 30px;

  .table-text {
    font-size: 14px;
    margin-bottom: 15px;
  }
}

.number-content {
  height: 50px;
  width: 90%;
  margin: 0 auto;
  background-color: rgb(244, 251, 254);
  display: flex;
  align-items: center;
  padding: 0 0 0 2%;
}
</style>
<style>
.ImportdialogBox {
  .el-pagination {
    margin-top: 20px;
    justify-content: center;
  }

  :deep(.el-dialog__body) {
    min-height: 240px;
  }
}
.secondCheck{
  top: 10%;
  background: linear-gradient(to bottom, #c6f2fd, #ffffff);
  .rightPicture{
    background: url("@/assets/images/important.png");
    width: 153px;
    height: 94px;
    background-size: 100% 100%;
  }
}
.ImportdialogBoxWork {
//max-height: 188px !important; //overflow: hidden; //overflow-y: scroll;

  .el-select-dropdown__list {
    height: 175px;
  }
}
</style>





























